import React, { Component } from 'react';
import {Step} from 'iftide';
import {View,Text,StyleSheet} from 'react-native'

const stepIndicatorStyles = {
    stepIndicatorSize: 20,
    currentStepIndicatorSize:20,
    separatorStrokeWidth: 3,
    currentStepStrokeWidth: 4,
    stepStrokeCurrentColor: '#FF7B7B',
    separatorFinishedColor: '#FF7B7B',
    separatorUnFinishedColor: '#aaaaaa',
    stepIndicatorFinishedColor: '#FF7B7B',
    stepIndicatorUnFinishedColor: '#aaaaaa',
    stepIndicatorCurrentColor: '#FF7B7B',
    stepStrokeFinishedColor:'#FF7B7B',
    stepStrokeUnFinishedColor:'#aaaaaa',
    stepIndicatorLabelFontSize: 15,
    currentStepIndicatorLabelFontSize: 15,
    stepIndicatorLabelCurrentColor: '#FFFFFF',
    stepIndicatorLabelFinishedColor: '#FFFFFF',
    stepIndicatorLabelUnFinishedColor: '#FFFFFF',
    labelColor: '#666666',
    errorStepColor: '#F9F900', 
    labelSize: 12,
    currentStepLabelColor: '#FF7B7B'
};
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            currentPage:1
        }
    }

    render() {
        const labels = [{
            majorLabel: '提交申请',
            minorLabel: '2017-03-01'
        },{
            majorLabel: '预审批通过',
            minorLabel: '2017-03-04'
        },{
            majorLabel: '贷款受理',
            minorLabel: '2017-03-07'
        },{
            majorLabel: '贷款审批中',
            minorLabel: '2017-03-10'
        }];

        let icon=require('./icon_close.png');
        let imgStyle = {  width: 14,height: 14,zIndex: 10,resizeMode:'contain'};
        return (
            <View>
                <Step
                    customStyles={stepIndicatorStyles}
                    stepCount={4}
                    direction='horizontal'
                    currentPosition={this.state.currentPage}
                    labels={labels}
                    orderStyle='pic'
                    imgPath={icon}
                    imgStyle={imgStyle}
                />
            </View>
        );
    }
}